@import "../../assets/scss/core/base";

$loading-prefix-cls: #{$jigsaw-prefix}-loading;
$ball-loading-prefix-cls: #{$jigsaw-prefix}-ball-loading;

@function delay($interval, $count, $index) {
    @return ($index * $interval) - ($interval * $count);
}

@-webkit-keyframes scale {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    45% {
        -webkit-transform: scale(0.1);
        transform: scale(0.1);
        opacity: 0.7;
    }
    80% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes scale {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    45% {
        -webkit-transform: scale(0.1);
        transform: scale(0.1);
        opacity: 0.7;
    }
    80% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

$amount: 10px;

@mixin ball($n: 3, $start: 1) {
    @for $i from $start through $n {
        > div:nth-child(#{$i}) {
            animation: scale 0.75s delay(0.12s, $n, $i) infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
        }
    }
}

.#{$ball-loading-prefix-cls}-host {
    @include inline-block;
    position: relative;
    height: 15px;
    width: 70px;
}

.#{$loading-prefix-cls}-content {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 15px;
    width: 70px;
    margin-top: -7.5px;
    margin-left: -35px;

    > div {
        background-color: #fff;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        margin: 2px;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        display: inline-block;;
    }
    @include ball();
}
